<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板插值案例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="Application" style="text-align: center;">
        <h1>这里是模板的内容：{{count}}次点击</h1>
        <button @click="clickButton">点击按钮</button>
    </div>
    <script>
        //定义一个Vue组件，名为App
        const App={
            data(){
                //目前·1我们只用到count数据
                return{
                    count:0
                }
            },
        //定义组件中的函数
        methods: {
            //实现单击点击按钮的方法
            clickButton(){
                this.count = this.count + 1
            }
            
        },
        }
        //将Vue组件绑定到页面上id为Application的元素上
        Vue.createApp(App).mount("#Application")        
    </script>
</body>
</html>